<template>
  <div class="detail">
    <cu-header :height="80" />
    <div class="search-container search-detail">
      <div class="search-detail-left">
        <el-cascader v-model="params.value1" :options="multiOptions" :props="{ value: 'code', label: 'name', checkStrictly: false }" :placeholder="$t('component.head.9')" @change="handleMultiChange" style="width: 100%"></el-cascader>
      </div>
      <div class="search-detail-right">
        <el-input class="flex-auto width0" :placeholder="$t('component.head.10')" prefix-icon="el-icon-search" v-model="params.keywords">
          <div class="mt5" slot="suffix">
            <el-button class="flex-none" type="primary" icon="el-icon-search" @click="handleSearch">{{ $t("component.head.11") }}</el-button>
          </div>
        </el-input>
      </div>
    </div>
    <div class="search-detail" style="justify-content: flex-start">
      <el-breadcrumb separator="·" style="font-size: 16px">
        <el-breadcrumb-item
          ><span class="hover-span" @click="goBack"><i class="el-icon-arrow-left" />{{ $t("detail.11") }}</span></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/list?type=' + detail.sectionId }">{{ detail.sectionName }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/list?type=' + detail.sectionId + ',' + detail.categoryId }"
          ><span class="hover-span">{{ detail.categoryName }}</span></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="detail-container container">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="images-container">
            <el-carousel ref="carousel" height="500px" :interval="5000" :initial-index="carouselIndex" arrow="always" indicator-position="none" @change="handleCarouselChange">
              <el-carousel-item v-for="(item, index) in detail.imgs" :key="index">
                <img class="detail-image" :src="domain + item" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="image-list" id="imgList">
            <div class="image-item" v-for="(img, index) in detail.imgs" :key="index" @click="handleCarouselChange(index)">
              <div class="showimg-item" :class="index === carouselIndex ? 'active' : ''">
                <img :src="domain + img" alt="" @click="changeImg(index)" />
              </div>
            </div>
          </div>
          <div class="info-section">
            <div class="flex flex-align-items-start">
              <div class="goods-name flex-auto width0 text-ellipsis-2">{{ detail.name }}</div>
              <div class="goods-func flex-none">
                <div>
                  <i class="fa fa-heart" style="color: #fb8c24; cursor: pointer" @click="handleFavorites()" v-if="isFavorites"></i>
                  <i class="fa fa-heart-o" style="color: #fb8c24; cursor: pointer" @click="handleFavorites()" v-else></i>
                  <i class="fa fa-share-alt" @click="shareFacebook()" style="color: #fb8c24; cursor: pointer"></i>
                </div>
                <!-- <div class="goods-views">{{ $t('detail.1') }}：{{ detail.views }}</div> -->
              </div>
            </div>
            <div style="padding-top: 20px">
              <el-tag effect="plain" style="margin-right: 10px; margin-bottom: 10px" v-for="(item, index) in paramList" :key="index">{{ item.portugalName }}：{{ item.portugalNameInner }}</el-tag>
            </div>
            <div class="goods-price">
              <!-- {{ $t('detail.2') }} -->
              <span>{{ detail.price | num2Money }} KZ</span>
            </div>
            <div class="desc">
              <div class="desc-title">{{ $t("detail.3") }}</div>
              <div class="desc-content" v-html="detail.des" style="white-space: pre-wrap">
                <!-- {{ detail.des }} -->
              </div>
            </div>
            <div class="time">
              <div class="time-content">
                {{ detail.createTime }}
              </div>
              <div class="time-content" style="border-left: 1px solid #999; padding-left: 20px">{{ $t("detail.10") }}：{{ detail.views }}</div>
              <div class="time-content" style="border-left: 1px solid #999; padding-left: 20px">{{ $t("detail.8") }}:{{ detail.id }}</div>

              <div class="ad" style="border-left: 1px solid #999; padding-left: 20px" @click="toComplain">
                <img style="width: 20px; height: 20px" :src="require('@/assets/images/warning.png')" alt="" />
                <span>Denunciar anúncio</span>
              </div>
            </div>
          </div>
          <div style="font-size: 12px; padding: 10px 0 10px 10px; border-top: 1px solid #d6d6d6; background: #f8f8f8">Todos os anúncios publicados neste site não são de responsabilidade do Vivebo.</div>
        </el-col>
        <el-col :span="8">
          <div class="panel">
            <div class="panel-title">{{ $t("detail.4") }}</div>
            <div class="userinfo flex flex-align-items-center">
              <div class="flex-none mr16">
                <img v-if="detail.portrait&&detail.portrait.startsWith('http')" class="head" :src="detail.portrait" alt="" />
                <img v-else class="head" :src="domain + detail.portrait" alt="" />
              </div>
              <div class="flex-auto width0" style="margin: 10px 0 0 20px">
                <div class="username">{{ detail.creatorNick }}</div>
                <div class="time">{{ detail.createTime }}</div>
                <div class="username">
                  <el-link class="mr20" @click.stop="handleGo(detail.username)">{{ $t("detail.9") }}</el-link>
                </div>
              </div>
            </div>
            <div class="btns">
              <el-button @click="handleShowPhone">{{ shwoPhone ? detail.telephone : $t("detail.6") }}</el-button>
              <el-button v-if="detail.username !== user.username" type="primary" @click="megVisible = true">{{ $t("detail.5") }}</el-button>
            </div>
          </div>
          <!-- <div class="panel mt20">
            <div class="panel-title">{{ $t('detail.7') }}</div>
            <div class="flex mv10">
              <div class="flex-none">
                <i class="el-icon-location" style="color: #fb8c24"></i>
              </div>
              <div class="location flex-auto width0">{{ detail.address }}</div>
            </div>
            <div class="map">
              <div class="google-map" ref="googleMap"></div>
            </div>
          </div> -->
        </el-col>
      </el-row>
    </div>

    <!-- 推荐商品 -->
    <!-- recommend -->
    <div class="recommend-out">
      <div class="panel-recommend">
        <div class="text-center mv40" style="text-align: left; margin: 20px 0">
          <span class="c-title">{{ $t("home.7") }}</span>
        </div>
        <div class="recommend-content mt20">
          <div class="flex flex-wrap">
            <div class="recommend-col" v-for="item in list" :key="item.id">
              <div class="recommend-item" @click="handleDetail(item)">
                <div class="jingxuan">
                  <img :src="item.showImg" alt="" />
                  <div class="recommend-item-title mv10">
                    <span class="recommend-tag" v-if="item.tag === '1' || item.tag === '3'">{{ $t("component.sendList.6") }}</span>
                  </div>
                </div>
                <div class="recommend-item-info">
                  <div class="recommend-item-title mv5">{{ item.name }}</div>
                  <div class="recommend-item-time">
                    <span>{{ item.areaName }}</span>
                  </div>
                  <div class="recommend-item-time">
                    <span>{{ item.createTime }}</span>
                  </div>
                  <div class="flex flex-justify-content-between flex-align-items-center">
                    <span class="recommend-item-price">{{ item.price | num2Money }} KZ</span>
                    <!-- <span class="recommend-item-unfavorite"><i class="fa fa-heart-o"></i></span> -->
                    <!-- <span class="recommend-item-favorited"><i class="fa fa-heart"></i></span> -->
                  </div>
                  <!-- <div class="recommend-item-userinfo flex flex-align-items-center">
                    <img :src="domain + item.portrait" alt="" />
                    <span>{{ item.creatorNick }}</span>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cu-footer />
    <el-dialog title="Denunciar anúncio" :visible.sync="adVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
      <div class="dialog-attention">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item>
            <el-radio-group v-model="ruleForm.resource">
              <div style="display: flex; flex-direction: column">
                <el-radio v-for="(item, index) in complainList" :key="index" :label="item" style="margin-bottom: 15px"></el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" :rows="6" placeholder="Mensagem" v-model="ruleForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 100%; text-align: center">
        <el-button type="primary" @click="submitComplain">Confirmar</el-button>
      </div>
    </el-dialog>
    <!--留言谈话框  -->
    <el-dialog title="Denunciar anúncio" :visible.sync="megVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
      <div class="dialog-attention">
        <el-input
          type="textarea"
          placeholder="Por favor, digite uma mensagem"
          v-model="messageContent"
          rows="7"
        >
        </el-input>
      </div>
      <div style="width: 100%; text-align: right;margin-top:20px">
        <el-button type="primary" @click="sendMsg">Enviar</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CuHeader from "@/components/header";
import CuFooter from "@/components/footer";
import Api from "@/api";
import { Domain, MAPKEY } from "@/constants";
import { isLogin } from "@/utils";
import { Loader } from "@googlemaps/js-api-loader";
export default {
  name: "Forget",
  components: { CuHeader, CuFooter },
  data() {
    return {
      sharing: {
        url: "https://news.vuejs.org/issues/180",
        title: "Say hi to Vite! A brand new, extremely fast development setup for Vue.",
        description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
        quote: "The hot reload is so fast it's near instant. - Evan You",
        hashtags: "vivebo",
        image: "",
        // twitterUser: 'youyuxi'
      },
      domain: Domain,
      id: "",
      detail: {},
      showImg: "",
      shwoPhone: false,
      carouselIndex: 0,
      isFavorites: false,
      map: null,
      params: {
        area: "",
        keywords: "",
      },
      paramList: [],
      multiOptions: [],
      list: [],
      params2: {
        pageSize: 5,
        pageNo: 1,
        categoryId: null,
      },
      adVisible: false,
      ruleForm: {},
      rules: {
        desc: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      // 投诉类型
      complainList: ["Burla", "Duplicado", "Ofensiva", "Categoria Incorrecta", "Itens Proibidos", "Anúncio desactualizado", "Outro"],
      user: {},
      // 留言
      megVisible:false,
      messageContent:""
    };
  },
  watch: {
    $route(to, form) {
      this.loadDetail();
      this.$router.go(0);
    },
  },
  create() {},

  mounted() {
    this.id = this.$route.query.id;
    this.loadDetail();
    this.initMap();
    this.getPosition();
    this.loadTree();
    if (this.hasLogin()) {
      this.loadUserInfo();
    }
    // this.loadData();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
        console.log(res);
      });
    },
    goSection(val) {},
    goCategory(val) {},
    changeImg(i) {
      let listWindow = document.getElementById("imgList");
      listWindow.scrollLeft = i * 106;
    },
    loadDetail() {
      const params = { id: this.id };
      Api.goodsDetail(params).then((res) => {
        this.detail = res;
        console.log(this.detail)
        this.sharing.url = window.location.href;
        this.sharing.title = this.detail.name;
        this.sharing.description = this.detail.des;
        this.sharing.quote = "This is Vivebo";
        this.detail.des = this.detail.des.replaceAll("<p>", "");
        this.detail.des = this.detail.des.replaceAll("</p>", "<br />");
        this.sharing.image = JSON.parse(res.imgList)[0] ? "https://www.vivebo.com/dfs" + JSON.parse(res.imgList)[0] : "";

        if (this.detail.parameterList) {
          this.paramList = JSON.parse(this.detail.parameterList);
        }
        this.params2.categoryId = this.detail.categoryId;
        this.detail.imgs = res.imgList ? JSON.parse(res.imgList) : [];
        this.showImg = this.detail.imgs.length > 0 ? this.detail.imgs[0] : "";
        this.loadFavoritesStatus();
        this.initMap();
        this.loadData();
      });
    },
    handleGo(username) {
      this.$router.push("/userAll/" + username);
    },
    getPosition() {
      return new Promise((resolve) => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const { latitude, longitude } = position.coords;
              resolve({
                lat: latitude,
                lng: longitude,
              });
            },
            () => {
              resolve({
                lat: 0,
                lng: 0,
              });
            }
          );
        } else {
          resolve({
            lat: 0,
            lng: 0,
          });
        }
      });
    },
    initMap() {
      const mapLoader = new Loader({
        apiKey: MAPKEY,
        version: "weekly",
      });
      mapLoader.load().then(() => {
        const position = { lat: this.detail.latitude, lng: this.detail.longitude };
        this.map = new window.google.maps.Map(this.$refs.googleMap, {
          center: position,
          zoom: 8,
        });
        new window.google.maps.Marker({
          position: position,
          map: this.map,
        });
      });
    },
    handleCarouselChange(index) {
      this.$refs.carousel.setActiveItem(index);
      this.carouselIndex = index;
      this.changeImg(index);
    },
    handleShowPhone() {
      this.shwoPhone = !this.shwoPhone;
    },
    loadFavoritesStatus() {
      Api.queryFavorites({ commodityId: this.id }).then((res) => {
        this.isFavorites = res;
      });
    },
    handleFavorites() {
      if (!isLogin()) {
        this.$login.show();
      } else {
        const params = {
          commodityId: this.id,
        };
        Api.addFavorites(params).then(() => {
          this.loadFavoritesStatus();
        });
      }
    },
    toChat() {
      if (!isLogin()) {
        this.$login.show();
      } else {
        let obj = {};
        obj.name = this.detail.creatorNick;
        obj.username = this.detail.username;
        obj.avatar = this.detail.portrait;
        console.log(this.detail);
        this.$router.push({ path: "/test", query: { chatPerson: JSON.stringify(obj) } });
      }
    },
    loadTree() {
      Api.areaTree().then((res) => {
        this.multiOptions = res;
        this.multiOptions.forEach((item) => {
          item.children.unshift({ name: "Região-" + item.name, code: null });
        });
        this.multiOptions.unshift({ name: "Angola", code: null });
      });
    },
    handleMultiChange(value) {
      this.params.area = value.join(",");
    },
    handleSearch() {
      this.$router.push({
        path: "/list",
        query: {
          area: this.params.area,
          keywords: this.params.keywords,
        },
      });
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
    loadData() {
      Api.goodsList(this.params2).then((res) => {
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    toComplain() {
      this.adVisible = true;
    },
    submitComplain() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let params = {};
          params.commodityId = this.detail.id;
          params.reason = JSON.stringify(this.ruleForm);
          console.log(params);
          Api.complainGoods(params).then((res) => {
            console.log(res);
            this.ruleForm = { desc: "", resource: "" };
          });
          this.adVisible = false;
        } else {
          return false;
        }
      });
    },
    shareFacebook() {
      let metaArr = ["og:url", "https://www.vivebo.com/vivebo/sharding/new/" + this.detail.id, "og:title", this.sharing.title, "og:description", this.sharing.description, "og:image", this.sharing.image, "og:type", "website"];
      let metaParams = metaArr.toString();
      window.FB.ui(
        {
          method: "share",
          href: `https://www.vivebo.com/vivebo/share/new/` + this.detail.id,
        },
        function (response) {
          //分享回调，可留空
        }
      );
      // window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(`https://www.vivebo.com/vivebo/share/new?meta=${metaParams}`))
    },
    sendMsg(){
      if(this.messageContent !== ""){
        let obj = {}
        obj.messageContent = this.messageContent
        obj.supplyId = this.id
        Api.sendMessage(obj).then(res=>{
          this.messageContent = ""
          this.megVisible = false
        })
      }else{
        return false
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  max-width: 1230px;
}
.images-container {
  background-color: #fff !important;
}
.ad {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    margin-right: 5px;
  }
}
.detail {
  min-height: 100vh;
  background: #f2f2f2;
  .detail-container {
    padding: 50px 0;
    padding-bottom: 10px;
    padding-top: 30px;
    .detail-image {
      // width: 100%;
      height: 100%;
      // width: 100%;
      margin: auto;
      background: #ffffff;
      display: block;
      position: relative;
    }
    .image-list {
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
      padding: 16px;
      flex-wrap: nowrap;
      overflow-x: auto;
      .image-item {
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
        .showimg-item {
          width: 90px;
          height: 90px;
          border: 1px solid transparent;
          box-sizing: border-box;
          overflow: hidden;
          &.active {
            border-color: #fb8c24;
          }
          img {
            width: 90px;
            min-height: 90px;
            cursor: pointer;
            object-fit: cover;
          }
        }
      }
    }
    .info-section {
      margin-top: 20px;
      padding: 16px;
      background: #fff;
      border-radius: 4px;
      .goods-name {
        color: #595959;
        font-size: 24px;
        font-weight: bold;
      }
      .goods-func {
        font-size: 16px;
        i {
          margin-left: 20px;
          display: inline-block;
        }
        .goods-views {
          margin-top: 10px;
          color: #999;
        }
      }
      .goods-price {
        margin-top: 24px;
        margin-bottom: 24px;
        color: #999999;
        font-size: 16px;
        height: 64px;
        line-height: 64px;
        background: #f7f7f7;
        border-radius: 4px;
        padding: 0 16px;
        span {
          color: #e94941;
          font-size: 24px;
          font-weight: bold;
          margin-left: 15px;
        }
      }
      .tag-btn {
        margin-bottom: 10px;
        margin-right: 10px;
      }
      .desc {
        .desc-title {
          font-size: 18px;
          color: #595959;
          line-height: 30px;
          font-weight: bold;
        }
        .desc-content {
          font-size: 16px;
          line-height: 28px;
          color: #595959;
        }
      }
      .time {
        color: #333;
        display: flex;
        margin-top: 60px;
        padding-top: 16px;
        font-size: 12px;
        border-top: 1px solid #d6d6d6;
        .time-content {
          margin-right: 20px;
          display: flex;
          align-items: center;
        }
      }
    }
    .panel {
      padding: 20px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 4px;
      .panel-title {
        font-size: 14px;
        font-weight: 900;
        color: #333333;
        margin-left: 10px;
      }
      .userinfo {
        margin-top: 16px;
        .head {
          width: 90px;
          height: 90px;
          border-radius: 100%;
          background: #f2f2f2;
          display: inline-block;
        }
        .username {
          color: #333333;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .time {
          font-size: 14px;
          color: #999;
        }
      }
      .location {
        font-size: 14px;
        color: #999999;
        margin-left: 10px;
      }
      .map {
        width: 100%;
        height: 300px;
        background: #f2f2f2;
      }
      .google-map {
        width: 100%;
        height: 100%;
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        margin-left: 10px;
      }
    }
  }
  ::v-deep .el-carousel__arrow {
    border-radius: 0;
    width: 45px;
    height: 90px;
    background: #262626;
    opacity: 0.53;
  }
}
.search-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1230px;
  margin: auto;
  margin-top: 20px;
  .search-detail-left {
    width: 265px;
    margin-right: 30px;
  }
  .search-detail-right {
    flex: 1;
  }
}
/* 推荐 */
.recommend-col {
  width: calc((100% - 128px) / 5);
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 32px;
  margin-bottom: 32px;

  cursor: pointer;
  &:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition-timing-function: ease-in-out;
  }
  &:nth-child(5n) {
    margin-right: 0;
  }
  .recommend-item {
    .jingxuan {
      position: relative;
      width: 100%;
      height: 170px;
      overflow: hidden;
      border-radius: 4px;
      img {
        width: 100%;
        min-height: 170px;
        object-fit: cover;
      }
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .recommend-item-title {
      color: #595959;
      font-size: 14px;
      line-height: 1.5;
      height: 40px;
      font-weight: 600;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .recommend-item-time {
      color: #999;
      font-size: 12px;
      margin: 10px 0;
    }
    .recommend-item-price {
      font-size: 14px;
      color: #fb8c24;
      font-family: Arial Black;
    }
    .recommend-item-unfavorite {
      color: #fb8c24;
    }
    .recommend-item-favorited {
      color: #fb5724;
    }
    .recommend-item-userinfo {
      font-size: 12px;
      color: #999999;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-top: 10px;
    }
    .recommend-item-userinfo img {
      width: 24px;
      height: 24px;
      border-radius: 100%;
      display: inline-block;
      background-color: #f2f2f2;
      margin-right: 5px;
    }
  }
}
.recommend-out {
  max-width: 1230px;
  margin: auto;
  margin-top: 50px;
}
.hover-span {
  cursor: pointer;
  font-weight: 600;
  color: #333333;
  &:hover {
    color: #fb8c24;
  }
}
</style>
